<template>
  <div>
    <div class="warnningTip">
      <i class="el-icon-warning-outline" />
      功能开通后，系统会将精彩瞬间视频片段精确匹配到会员，会员可以登录后查看专属精彩瞬间。如需开通，请联系您的业务经理
    </div>
    <!-- <el-button type="primary" @click="isShowModal = true">开通</el-button> -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table mt20"
    >
      <el-table-column
        align="center"
        label="服务名称"
        min-width="150"
        show-overflow-tooltip
      >
        <template>
          <span>精彩瞬间-人员匹配</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="开通套餐"
        min-width="120"
        prop="mealName"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="开通时间"
        min-width="160"
        prop="openTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="到期时间"
        min-width="160"
        prop="expirationTime"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span :class="scope.row.red ? 'secondColor' : ''">{{ scope.row.expirationTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="视频总时长"
        min-width="120"
        prop="totalTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="剩余时长"
        min-width="120"
        prop="surplusTime"
        show-overflow-tooltip
      />
    </el-table>
    <!-- <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    /> -->
    <!--  -->
    <el-dialog
      title="精彩瞬间人员匹配购买"
      :visible.sync="isShowModal"
      width="500px"
    >
      <div class="mb10">精彩瞬间人员匹配开通后会对精彩瞬间视频匹配到人。</div>
      <div class="mb10">如果您有这方面的需要，可以通过以下方式跟我们联系：</div>
      <div class="mb10">联系电话 18038443243 18038443242</div>
      <div class="mt20 df">
        <img src="" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { wonderfulMomentsOpenlist } from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      listLoading: false,

      isShowModal: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    openBtnClick() {

    },
    getList(page) {
      this.listLoading = true
      const { pagination } = this
      if (page) {
        this.pagination.page = page
      }
      wonderfulMomentsOpenlist({ pagination, param: { type: '1' }})
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList || []
            this.total = res.totalCount
            const nowTime = new Date().getTime()
            this.list.forEach(item => {
              if (item.expirationTime) {
                const expirationTime = new Date(item.expirationTime).getTime()
                if ((expirationTime - nowTime) < 86400000 * 30) {
                  item.red = true
                }
              }
            })
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    }
  }
}
</script>

<style>
</style>
